<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .mask{
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            /* text-align: center; */
        }
    </style>
</head>
<body>
    <div id="app">
        <div :style="{width:'300px',height:'300px',backgroundColor:'red'}" v-loading="flag"></div>

        <button @click="flag=!flag">点击</button>
        <button @click="aaa">11111</button>

    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 注册全局的自定义指令 v-focus

        // 指令的配置项中就是提供了一系列的钩子hook函数
        Vue.directive("loading",{
            // 生成对应的蒙版mask
            // 该阶段可以拿到div,但是div没有加载到页面中
            bind(el){ // 指令初次绑定到dom元素上 （编译模板的阶段）， 初始化的操作
                el.style.position = "relative";

                const mask = document.createElement("div");
                // classList 属性返回元素的类名，
                // classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
                mask.classList.add("mask");

                mask.innerHTML = "<p>加载中...</p>"
                el.appendChild(mask);

            },
            inserted(el,binding){ // 指令对应的dom元素插入到 父节点 （编译结束，然后挂载到页面上时）
               
            },
            update(el,binding){ //涉及到更新
                const {value} = binding;
                console.log(binding);
                console.log(value);

                if(value){
                    el.querySelector(".mask").style.display = "flex";
                }else{
                    el.querySelector(".mask").style.display = "none";
                }
            },
            unbind(el){ //解绑
                const mask = el.querySelector(".mask");
                el.removeChild(mask);
            }
        })
        var vm = new Vue({
            el:"#app",
            data:{
                msg: "",
                flag: false
            },
            methods:{
                aaa(){
                    this.$destroy();
                }
            }
        })

    </script>
</body>
</html>